{% extends "personal_center/base.html" %}
{% load state_display %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/index.css">
    <script type="text/javascript" src="../../static/personal_center/js/index.js"></script>
    <link href="../../static/personnel/css/jquery.searchableSelect.css" rel="stylesheet" type="text/css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .tab_top {
            width: 100px;height: 40px;line-height: 40px;text-align: center;display: inline-block;cursor: pointer;
        }
        tr th {
            background-color: #f2f3f1;
        }
        .shade {
            position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(36, 36, 36, 0.5);display: none;z-index: 10000;
        }
        .quxiao {
            width: 100px;height: 30px;margin-top: 8px;border: #DFDFDF solid 1px;background: #DFDFDF;line-height: 30px;
        }
        .quxiao:hover {
            background: #999999;
        }
        .queren {
            width: 100px;height: 30px;margin-top: 8px;border: #2db7f5 solid 1px;background: #2db7f5;line-height: 30px;
        }
        .queren:hover {
            background: #00a0e9;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div style="display: inline-block;vertical-align: top;width: 100%;height: 100%;">
        <div class="headline">
            <div style="display: inline-block;vertical-align: top;width: 200px;height: 40px;margin-left: 1%;padding-top: 5px;">
                <select name="" id="year" style="width: 100%;height: 30px;border: #2db7f5 solid 1px;outline: none;" class="dept_select">
                    {% for year in year_list %}
                        <option value="{{ year }}">{{ year }}</option>
                    {% endfor %}
                </select>
            </div>

            <div style="display: inline-block;vertical-align: top;height: 40px;">
                <input type="text" id="search_value" name="search_val" style="width: 300px;display: inline-block;border: #0d8ddb solid 1px;vertical-align: top;font-size: 14px;padding-left: 2px;margin-top: 5px;height: 30px;outline: none;" placeholder="请输入搜索关键词" autocomplete="off">
                <button class="search-action" style="width: 100px;display: inline-block;font-size: 14px;border: #0d8ddb solid 1px;border-left: none;background: #0d8ddb;color: white;margin-top: 5px;height: 30px;margin-right: 15px;outline: none;cursor: pointer;line-height: 25px;letter-spacing: 3px;">搜索</button>
            </div>

            {% if morals_wind_flag %}
                <div style="width: 7%;text-align: center;height: 100%;float: right;">
{#                    <button style="height: 30px;width: 90%;background: #0c6fd9;color: #ffffff;border-radius: 3px;line-height: 30px;border: #0c6fd9 solid 1px;margin-top: 5px;letter-spacing: 4px;" onclick="summit_flow()" id="add_station">#}
                    <button style="height: 30px;width: 90%;background: #0c6fd9;color: #ffffff;border-radius: 3px;line-height: 30px;border: #0c6fd9 solid 1px;margin-top: 5px;letter-spacing: 4px;" onclick="show_prompt_model()" id="add_station">
                        批量提交
                    </button>
                </div>
            {% endif %}
        </div>

        <div id="my_application" style="width: 100%;height: 95.3%;overflow: auto;background-color: white;">
            <div class="right-box" style="width: 100%;height: 100%;margin-top: 0;">
                <div style="height: 100%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
                    <section class="grid-main" style="height: 100%;">
                        <table id="main_table"></table>
                    </section>
                </div>
            </div>
        </div>
    </div>

    <div id="prompt" class="shade">
        <div style="width: 100%;height: 100%;position: absolute;">
            <div id="PromptFirst" style="width: 350px;height: 200px;background: white;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
                <div id="PromptSecond" style="display: flex;justify-content: space-between;box-sizing: border-box;padding: 0 10px;height: 40px;color: #0b0b0b;cursor: move;width: 100%;background: #f4f7fa;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                    <h5 style="line-height: 40px;width: 15%;margin-left: 1%;display: inline-block;font-size: 14px;">提示</h5>
                    <span onclick="close_prompt_models()" style="float: right;line-height: 40px;padding-right: 2%;cursor: pointer;"><i class="iconfont icon-quchu"></i></span>
                </div>
                <hr>
                <div id="prompt_content" style="width: 350px;height: 105px;padding: 1%;line-height: 30px;letter-spacing: 2px;padding-left: 15px;">
                    已上传 {{ all_count }} 人，请确认是否全部上传！<br>
                    优秀人数 {{ best_count }} 人；<br>
                    其中<strong>优秀</strong>人数占比：{{ Proportion }}%
                </div>
                <div style="width: 100%;height: 40px;text-align: center;">
                    <button class="quxiao" onclick="close_prompt_models()">取&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消</button>
                    {% if summit_flag == "true" %}
                        <button class="queren" onclick="summit_flow()">确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认</button>
                    {% else %}
                        <button class="queren" onclick="javascript:alert('优秀人数超过15%，请重新评分！')">确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认</button>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script src="../../static/personnel/js/jquery-1.11.1.min.js"></script>
    <script src="../../static/personnel/js/jquery.searchableSelect.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("sponsor").className = "add-nav-active";
        };
        const SearchYear = "{{ search_year | safe }}";
        var id_list = [];
        const gridManagerName = "test",
            TYPE_MAP = {1: "HTML/CSS", 2: "nodeJS", 3: "javaScript", 4: "前端鸡汤", 5: "PM Coffee", 6: "前端框架", 7: "前端相关"},
            GM_PUBLISH_METHOD_MAP = {
                init: {key: "init", relyInit: !1, title: "初始化", code: 'demo1.initGM(document.querySelector("table"));'},
                get: {key: "get", relyInit: !0, title: "获取表格的实时配置信息", code: `GridManager.get('${gridManagerName}');`},
                version: {key: "version", relyInit: !1, title: "获取当前GridManager的版本号", code: "GridManager.version;"},
                getLocalStorage: {
                    key: "getLocalStorage",
                    relyInit: !0,
                    title: "获取表格用户记忆",
                    code: `GridManager.getLocalStorage('${gridManagerName}');`
                },
                resetLayout: {
                    key: "resetLayout",
                    relyInit: !0,
                    title: "重置表格布局",
                    code: `GridManager.resetLayout('${gridManagerName}', '800px', '500px');`
                },
                clear: {
                    key: "clear",
                    relyInit: !0,
                    title: "清除表格记忆数据",
                    code: `GridManager.clear('${gridManagerName}');`
                },
                getTableData: {
                    key: "getTableData",
                    relyInit: !0,
                    title: "获取指定tr所使用的数据",
                    code: `GridManager.getTableData('${gridManagerName}');`
                },
                getRowData: {
                    key: "getRowData",
                    relyInit: !0,
                    title: "获取指定tr所使用的数据",
                    code: `GridManager.getRowData('${gridManagerName}', document.querySelector("table[grid-manager=${gridManagerName}] tbody tr"));`
                },
                updateRowData: {
                    key: "updateRowData",
                    relyInit: !0,
                    title: "更新指定行所使用的数据",
                    code: `GridManager.updateRowData('${gridManagerName}', 'id', {id: 112, title: 'ccc'});`
                },
                updateTreeState: {
                    key: "updateTreeState",
                    relyInit: !0,
                    title: "更新树的展开状态",
                    code: `GridManager.updateTreeState('${gridManagerName}', true);`
                },
                setSort: {
                    key: "setSort",
                    relyInit: !0,
                    title: "手动设置排序",
                    code: `GridManager.setSort('${gridManagerName}', {createDate: 'ASC'});`
                },
                setConfigVisible: {
                    key: "setConfigVisible",
                    relyInit: !0,
                    title: "设置表头配置区域可视状态",
                    code: `GridManager.setConfigVisible('${gridManagerName}', true);`
                },
                setLineHeight: {
                    key: "setLineHeight",
                    relyInit: !0,
                    title: "配置行的高度",
                    code: `GridManager.setLineHeight('${gridManagerName}', '70px');`
                },
                showTh: {
                    key: "showTh",
                    relyInit: !0,
                    title: "设置列为可视状态",
                    code: `GridManager.showTh('${gridManagerName}', 'pic');`
                },
                hideTh: {
                    key: "hideTh",
                    relyInit: !0,
                    title: "设置列为隐藏状态",
                    code: `GridManager.hideTh('${gridManagerName}', 'pic');`
                },
                exportGrid: {
                    key: "exportGrid",
                    relyInit: !0,
                    title: "导出指定表格",
                    code: `GridManager.exportGrid('${gridManagerName}', 'demo中使用的导出').then(res=>{console.log('success')}).catch(err=>{console.error('error', err)});`
                },
                setQuery: {
                    key: "setQuery",
                    relyInit: !0,
                    title: "更改在生成组件时所配置的参数query",
                    code: `GridManager.setQuery('${gridManagerName}', {'userName':'baukh','sex':'男'});`
                },
                setAjaxData: {
                    key: "setAjaxData",
                    relyInit: !0,
                    title: "用于再次配置ajaxData数据",
                    code: `GridManager.setAjaxData('${gridManagerName}', {data: [{title: '通过setAjaxData动态添加的数据，其它项为空'}], totals: 1});`
                },
                refreshGrid: {
                    key: "refreshGrid",
                    relyInit: !0,
                    title: "刷新表格",
                    code: `GridManager.refreshGrid('${gridManagerName}');`
                },
                renderGrid: {
                    key: "renderGrid",
                    relyInit: !0,
                    title: "渲染表格",
                    code: `GridManager.renderGrid('${gridManagerName}');`
                },
                getCheckedTr: {
                    key: "getCheckedTr",
                    relyInit: !0,
                    title: "获取当前选中的行",
                    code: `GridManager.getCheckedTr('${gridManagerName}');`
                },
                getCheckedData: {
                    key: "getCheckedData",
                    relyInit: !0,
                    title: "获取选中行的渲染数据",
                    code: `GridManager.getCheckedData('${gridManagerName}');`
                },
                setCheckedData: {
                    key: "setCheckedData",
                    relyInit: !0,
                    title: "设置选中的数据",
                    code: `GridManager.setCheckedData('${gridManagerName}', [GridManager.getTableData('${gridManagerName}')[1]]);`
                },
                cleanData: {
                    key: "cleanData",
                    relyInit: !0,
                    title: "清除指定表格数据",
                    code: `GridManager.cleanData('${gridManagerName}');`
                },
                print: {key: "print", relyInit: !0, title: "打印当前页", code: `GridManager.print('${gridManagerName}');`},
                showRow: {
                    key: "showRow",
                    relyInit: !0,
                    title: "显示隐藏行",
                    code: `GridManager.showRow('${gridManagerName}', 1);`
                },
                hideRow: {
                    key: "hideRow",
                    relyInit: !0,
                    title: "隐藏行",
                    code: `GridManager.hideRow('${gridManagerName}', 1);`
                },
                showLoading: {
                    key: "showLoading",
                    relyInit: !0,
                    title: "显示加载中",
                    code: `GridManager.showLoading('${gridManagerName}');`
                },
                hideLoading: {
                    key: "hideLoading",
                    relyInit: !0,
                    title: "隐藏加载中",
                    code: `GridManager.hideLoading('${gridManagerName}', 300);`
                },
                destroy: {
                    key: "destroy",
                    relyInit: !0,
                    title: "消毁指定的GridManager实例",
                    code: `GridManager.destroy('${gridManagerName}');`
                }
            }, arg = {
                gridManagerName: "test",
                width: "100%",
                height: "100%",
                autoOrderConfig: {fixed: "left"},
                checkboxConfig: {key: "id", fixed: "left"},
                supportAjaxPage: !0,
                sortMode: "single",
                supportMenu: !0,
                menuHandler: e => (e.unshift({
                    content: "自定义菜单", line: !0, onClick: e => {
                        alert(e)
                    }
                }), e),
                useCellFocus: !0,
                useHideRow: !0,
                supportMoveRow: !0,
                moveRowConfig: {
                    key: "priority", useSingleMode: !0, fixed: "left", handler: (e, t) => {
                        console.log(e, t)
                    }
                },
                disableCache: !1,
                ajaxData: function (e, t) {
                    {#t['SearchYear'] = SearchYear;#}
                    return "/medical-ethics/DepartmentSummary.html"
                },
                exportConfig: {
                    fileName: e => {
                        const t = new Date;
                        let a = `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`;
                        for (let t in e) a = `${a}-${t}=${e[t]}`;
                        return a
                    }, suffix: "xls"
                },
                ajaxType: "POST",
                checkedBefore: function (e, t, a) {
                    return console.log("checkedBefore==", e, t, a), a && 90 === a.id && alert("该节点在checkedBefore中配置为不可选"), a && 90 !== a.id
                },
                checkedAfter: function (e, t, a) {
                    console.log("checkedAfter==", e, t, a)
                    id_list = [];
                    for (var j=0; j<e.length; j++){
                        id_list.push(e[j]["id"])
                    }
                },
                checkedAllBefore: function (e, t) {
                    console.log("checkedAllBefore==", e, t)
                },
                checkedAllAfter: function (e, t) {
                    console.log("checkedAllAfter==", e, t)
                    id_list = [];
                    for (var j=0; j<e.length; j++){
                        id_list.push(e[j]["id"])
                    }
                },
                sortingBefore: function (e) {
                    console.log("sortingBefore", e)
                },
                sortingAfter: function (e) {
                    console.log("sortingAfter", e)
                },
                ajaxBeforeSend: function (e) {
                    console.log("ajaxBeforeSend")
                },
                ajaxSuccess: function (e) {
                    console.log("ajaxSuccess")
                },
                ajaxError: function (e) {
                    console.log("ajaxError")
                },
                ajaxComplete: function (e) {
                    console.log("ajaxComplete")
                },
                adjustBefore: e => {
                    console.log("adjustBefore=>", e)
                },
                adjustAfter: e => {
                    console.log("adjustAfter=>", e)
                },
                responseHandler: e => (e.data.forEach((e => {
                    e.priority = e.id
                })), e),
                rowRenderHandler: (e, t) => e,
                emptyTemplate: e => `<div style="text-align: center;">${e.query.title ? "搜索为空" : "暂无数据"}</div>`,
                columnData: [
                    {
                        key: "title",
                        text: "标题",
                        align: "center",
                        width: '250px'
                    }, {
                        key: "apply_user",
                        text: "申请人",
                        align: "center",
                    }, {
                        key: "create_time",
                        text: "创建时间",
                        align: "center",
                    }, {
                        key: "professional_title",
                        text: "职称",
                        align: "center",
                    }, {
                        key: "employ_date",
                        text: "参加工作时间",
                        align: "center",
                    }, {
                        key: "job",
                        text: "从事工作",
                        align: "center",
                    }, {
                        key: "level",
                        text: "考评等级",
                        align: "center",
                    }, {
                        key: "state",
                        text: "状态",
                        align: "center",
                    }, {
                        key: "action",
                        width: "150px",
                        align: "center",
                        fixed: "right",
                        disableMoveRow: !0,
                        disableRowCheck: !0,
                        text: '<span style="color: red">操作</span>',
                        template: (e, t) => `<a class="plugin-action" href="javascript:;">${t.url}</a>`
                    }]
            }, demo1 = {
                initSearch: function () {
                }, initFN: () => {
                    document.querySelector(".search-action").addEventListener("click", (function () {
                        const SearchYear = document.getElementById("year").value;
                        var e = {
                            search_data: document.querySelector('[name="search_val"]').value,
                            SearchYear: SearchYear,
                        };
                        table.GM("setQuery", e, (function () {
                            console.log("setQuery执行成功")
                        }))
                    }))
                }, initGM: function () {
                    new window.GridManager(table, arg, (e => {
                        console.log("渲染完成后的回调函数:", e), console.log(arg.columnData)
                    }))
                }, editRowData: function (e) {
                    window.GridManager.updateRowData("test", "id", {
                        id: window.parseInt(e.getAttribute("data-id")),
                        lastDate: (new Date).getTime()
                    })
                }
            }, table = document.querySelector("#main_table");
        demo1.initSearch(table), demo1.initGM(table), demo1.initFN();

        function summit_flow() {
            if (id_list.length === 0) {
                alert("请选择提交流程！")
                return false
            }
            console.log("id_list==========", id_list)
            var form = new FormData();
            form.append("id_list", JSON.stringify(id_list))
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/medical-ethics/BatchSubmission", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        if (JsonDate['code'] === 200) {
                            alert(JsonDate['message']);
                            window.location.reload()
                        } else {
                            alert(JsonDate['message'])
                        }

                    }
                }
             }
        }

        function select_and_search() {
            xmSelect.render({
                el: '#selectDemo',
                checkbox: true,
                repeat: false,
                autoRow: true,
                filterable: true,
                prop: {name: 'name', value: 'value',},
                height: '200px',
                tips: '请选择',
                tree: {
                    show: true,
                    showFolderIcon: true,
                    showLine: true,
                    indent: 20,
                    expandedKeys: [-3],
                    strict: false,
                },
                data: function () {
                    return {{ dep_dict_list | safe }};

                },
                on: function (data) {
                    var arr = data.arr;                     //arr:  当前多选已选中的数据
                    console.log("data: ", arr)
                    var li_list = document.getElementsByClassName("xm-icon-duox")
                    for (var i=0; i<li_list.length; i++) {
                        console.log(li_list[i].selected)
                    }
                },
            });
        }

        $(function(){
            $('#year').searchableSelect();
        });

        var select_list = document.getElementsByClassName("searchable-select-holder");
        for (var sel=0; sel<select_list.length; sel++) {
            select_list[sel].style.height = '30px';
            select_list[sel].style.borderRadius = '0';
        }

        function SingleSubmission(flow_id) {
            var summit_flag = "{{ summit_flag | safe }}";
            if (summit_flag === "true") {
                var form = new FormData();
                form.append("flow_id", flow_id)
                var xhr = new XMLHttpRequest();
                xhr.open('post', "/medical-ethics/single_submission", true);
                xhr.send(form);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            document.getElementById("loading").style.display = "none";
                            var JsonDate = JSON.parse(xhr.responseText);
                            console.log(JsonDate);
                            if (JsonDate['code'] === 200) {
                                alert(JsonDate['message']);
                                window.location.reload()
                            } else {
                                alert(JsonDate['message'])
                            }

                        }
                    }
                }
            }else {
                alert("优秀人数超过15%，请重新评分！")
            }
        }

        function show_prompt_model() {
            document.getElementById("prompt").style.display="table-row";
        }

        function close_prompt_models() {
            document.getElementById("prompt").style.display = "none";
        }

        let PromptSecond = document.querySelector("#PromptSecond");
        let PromptFirst = document.querySelector("#PromptFirst");

        PromptSecond.addEventListener("mousedown", function (e) {
            let x = e.pageX - PromptFirst.offsetLeft;
            let y = e.pageY - PromptFirst.offsetTop;

            document.addEventListener("mousemove", move);
            function move(e) {
                PromptFirst.style.left = e.pageX - x + 'px';
                PromptFirst.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });
    </script>
{% endblock %}
